<script setup>
  import { ref } from 'vue'
  import {
    addPatientInfoApi,
    editPatientInfoApi,
    patientInfoApi,
  } from '@/server/patient'
  import { onLoad } from '@dcloudio/uni-app'
  import formItem from '../../uni_modules/uview-plus/components/u-form-item/formItem'

  const patientTitle = ref('添加患者')

  // 微信小程序适配
  const scrollpagemTop = ref(0)
  // #ifdef MP-WEIXIN
  scrollpagemTop.value = uni.getWindowInfo().safeArea.top + 44
  // #endif

  // 表单数据
  const patientInfo = ref({
    name: '',
    idCard: '',
    defaultFlag: 0,
    gender: 0,
  })

  // 表单规则
  const patientRules = {
    name: {
      rules: [
        { required: true, errorMessage: '请填写姓名' },
        {
          pattern: /[\u4e00-\u9fa5]{2,5}/,
          errorMessage: '请输入2-5位的中文名称',
        },
      ],
    },
    idCard: {
      rules: [
        { required: true, errorMessage: '请填写身份证号码' },
        {
          pattern:
            /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
          errorMessage: '请填写身份证号码',
        },
      ],
    },
    gender: {
      rules: [
        {
          validateFunction(rule, value, data, callback) {
            if (patientInfo.value.idCard.slice(16, 17) % 2 !== value) {
              return callback('请输入正确的性别')
            }
            return true
          },
        },
      ],
    },
  }

  const query = defineProps(['id'])

  // 标题修改,判断是否获取单个患者详细信息
  const isShow = ref(false)
  async function getPatientInfo() {
    if (query.id) {
      const { data } = await patientInfoApi(query.id)
      patientTitle.value = '编辑患者'
      for (let key in patientInfo.value) {
        patientInfo.value[key] = data.data[key]
      }
      isShow.value = true
    } else {
      patientTitle.value = '添加患者'
      isShow.value = true
    }
  }
  getPatientInfo()

  // 点击保存
  const patientform = ref(null)
  async function onpatientSubmitfn() {
    try {
      await patientform.value.validate()
      let data = ''
      if (!query.id) {
        const { data } = await addPatientInfoApi(patientInfo.value)
        if (data.code !== 10000) return uni.utils.toast(data.message)
      } else {
        const { data } = await editPatientInfoApi({
          ...patientInfo.value,
          id: query.id,
        })
        if (data.code !== 10000) return uni.utils.toast(data.message)
      }

      uni.navigateBack()
    } catch (e) {
      //TODO handle the exception
    }
  }
</script>

<template>
  <up-navbar v-if="isShow" :title="patientTitle" safeAreaInsetTop autoBack>
  </up-navbar>
  <scroll-page
    v-if="isShow"
    borderTopColor="#fff"
    :style="{ marginTop: '44rpx' }"
  >
    <view class="archive-page" :style="{ marginTop: `${scrollpagemTop}px` }">
      <uni-forms
        border
        label-width="220rpx"
        ref="patientform"
        :rules="patientRules"
        v-bind:modelValue="patientInfo"
      >
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            v-model="patientInfo.name"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
            v-model="patientInfo.idCard"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
            v-model="patientInfo.gender"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人">
          <view class="uni-switch">
            <up-switch
              v-model="patientInfo.defaultFlag"
              activeColor="#20c6b2"
              :activeValue="1"
              :inactiveValue="0"
            ></up-switch>
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="onpatientSubmitfn">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
